import React, { useState, useMemo } from "react";
// useMemo它也是用来缓存函数的
// 语法跟useCallback完全相同

// useMemo可以理解为函数组件的计算属性

// useCallback和useMemo的区别
// 同样是缓存函数，useCallback缓存的是函数本身，useMemo缓存的是函数的返回值

const App = () => {
  const [count, set_count] = useState(1);
  const [num, set_num] = useState(1);

  const fn = () => {
    set_count((v) => v + 1);
  };

  const fn2 = () => {
    set_num((v) => v + 1);
  };

  const sum = useMemo(() => {
    console.log("sum");
    let j = 0;
    for (let i = 0; i < count * 100; i++) {
      j += i;
    }
    return j;
  }, [count]);

  return (
    <>
      <h3>useMemo</h3>
      <p>{count}</p>
      <p>{sum}</p>
      <button onClick={fn}>btn</button>

      <hr />
      <p>{num}</p>
      <button onClick={fn2}>btn</button>
    </>
  );
};

export default App;
